
<template>
  <div >
    <Card>
      <Content style="margin-left:10px;">
        <div class="search-con search-con-top">
          <span>时间筛选：</span>
          <DatePicker v-model="queryData.start" type="date" placeholder="开始时间" style="width: 120px"></DatePicker>
          ——
          <DatePicker v-model="queryData.end" type="date" placeholder="结束时间" style="width: 120px"></DatePicker>
          <span>姓名：</span>
          <Input v-model="queryData.name" placeholder="姓名" style="width: 200px"/>
          <span>工号查询：</span>
          <Input v-model="queryData.account" placeholder="请输入工号名称" style="width: 200px"/>
          <Button type="primary" @click="queryList" class="query">查询</Button>
          <Button @click="reset" class="query">重置</Button>
        </div>
        <Table :loading="loading" :columns="tableColumns" :data="tableData" size="large">
          <template slot="action" slot-scope="{ row, index }">
            <Button @click="ViolationOfDetails(row,index)" type="primary">查看详情</Button>
          </template>
          <template slot="health" slot-scope="{ row, index }">
            <Button @click="HealthOfDetails(row,index)" type="success">健康详情</Button>
          </template>
        </Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
          </div>
        </div>
      </Content>
    </Card>
    <Modal v-model="violateModal" fullscreen title="  " :scrollable="false" >
      <div id="model" style="padding-left: 100px;padding-right: 100px">
        <Card shadow >
          <div class="title">
            驾驶员基本信息:
          </div>
          <Row >
            <Col span="18" >
              <div>
                <img :src="drivingDetail.imgSrc"  alt="头像" class="avatar" style="height: 350px;"/>
                <div class="driver">
                  <div class="driverInfoItem" style="display:inline-block;">
                    姓名:{{drivingDetail.name}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    工号：{{drivingDetail.account}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    电话：{{drivingDetail.phone}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    驾驶日期：{{drivingDetail.driveDate}}
                  </div>
                  <div class="driverInfoItem">
                    驾驶时长：{{drivingDetail.driveLength}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    出发地：{{drivingDetail.departure}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    目的地：{{drivingDetail.destination}}
                  </div>
                </div></div>
            </Col>
            <Col span="6">
              <div style="margin-left: -55px">
                <h1 style="margin-left: 90px;font-size: 30px">安全总评</h1>
                <i-circle
                  :size="300"
                  :trail-width="14"
                  :stroke-width="13"
                  :percent=percent
                  stroke-linecap="square"
                  :stroke-color=color>
                  <div class="demo-Circle-custom">
                    <h2 style="font-size: 50px">{{drivingDetail.securityEvaluation}}</h2>
                    <h1 style="font-size: 50px">{{drivingDetail.securityScore}}</h1>
                  </div>
                </i-circle>
              </div>
            </Col>
          </Row>
        </Card>
        <Card >
          <div class="title">
            违规统计:
          </div>
          <div v-if="violateModal">
            <Row :gutter="20">
              <Col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
                <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                  <count-to :end="infor.count" count-class="count-style"/>
                  <p style="font-size: 17px">{{ infor.title }}</p>
                </infor-card>
              </Col>
            </Row>

            <Row :gutter="20" style="margin-top: 10px;">
              <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
                <Card shadow>
                  <chart-pie style="height: 300px;" :value="pieData" text="危险评估权重"></chart-pie>
                </Card>
              </i-col>
              <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
                <Card shadow>
                  <chart-bar style="height: 300px;" :value="barData" text="危险评分"/>
                </Card>
              </i-col>
            </Row>
          </div>

        </Card>
        <Card id="timeLineBlock" class="parent" >
          <div class="title">
            违规详情:
            <a  @click="clickAllItem()" class="content">全部</a>
          </div>
          <div>
            <Row>
              <Col span="8">
                <div :class='{fixedTimeLine:isFixTimeLine}'>
                  <Timeline id="timeLine" >
                    <TimelineItem v-for="item in violateList">
                      <p class="time">{{item.createTime}}</p>
                      <a @click="handleTimeItemClick(item)" class="content">{{item.udvtypeName}}</a>
                    </TimelineItem>
                  </Timeline>
                </div>
                <div :class='{placeBlock:!isFixTimeLine}'>
                  <br>
                </div>
              </Col>
              <Col span="16">
                <div class="imgBox">
                  <img-box :imgList="imgList">
                  </img-box>
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      </div>
    </Modal>
    <Modal v-model="healthModal" fullscreen title="  " :scrollable="false" >
      <div id="healthModel" style="padding-left: 100px;padding-right: 100px">
        <Card shadow >
          <div class="title">
            驾驶员基本信息:
          </div>
          <Row >
            <Col span="18" >
              <div>
                <img :src="drivingDetail.imgSrc"  alt="头像" class="avatar" style="height: 350px;"/>
                <div class="driver">
                  <div class="driverInfoItem" style="display:inline-block;">
                    姓名:{{drivingDetail.name}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    工号：{{drivingDetail.account}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    电话：{{drivingDetail.phone}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    驾驶日期：{{drivingDetail.driveDate}}
                  </div>
                  <div class="driverInfoItem">
                    驾驶时长：{{drivingDetail.driveLength}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    出发地：{{drivingDetail.departure}}
                  </div>
                  <div class="driverInfoItem" style="display:inline-block;">
                    目的地：{{drivingDetail.destination}}
                  </div>
                </div></div>
            </Col>
            <Col span="6">
              <div style="margin-left: -55px">
                <h1 style="margin-left: 90px;font-size: 30px">健康总评</h1>
                <i-circle
                  :size="300"
                  :trail-width="14"
                  :stroke-width="13"
                  :percent=healthPercent
                  stroke-linecap="square"
                  :stroke-color=healthColor>
                  <div class="demo-Circle-custom">
                    <h1 style="font-size: 50px">100分</h1>
                  </div>
                </i-circle>
              </div>
            </Col>

          </Row>
        </Card>
        <Card >
          <div class="title">
            健康统计:
          </div>
          <div v-if="healthModal" style="width: 1000px;height: 800px">
            <HealthChart
              :xdata="xdata"
              :callQuantity="callQuantity"
              :successRate="successRate"
              :failureRate="failureRate"
              :value="barData" text="危险评分"
              style="width: 1100px;height: 400px;margin-left: 200px">
            </HealthChart>
          </div>

        </Card>
        <Card  class="parent" >
          <div class="title">
            健康说明:
          </div>
          <div>
            未出现异常状况
          </div>
        </Card>
      </div>
    </Modal>
  </div>
</template>

<script src="./journey-record.js">
</script>
<style scoped>
.time{
  font-size: 20px;
  font-weight: bold;
}
.content{
  font-size: 20px;
  padding-left: 5px;
}

span{
  margin-left: 10px;
}

.query{
  margin-left: 20px;
}

.title{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
.driverInfoItem{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right:50px;
}
.count-style{
  font-size: 50px;
}
.fixedTimeLine{
  position: fixed;
  top: 80px;
}
.placeBlock{
  width: 1000px;
}
.parent{
  position: relative;
  width:100%;
  height: 100%;
}
.avatar{
  vertical-align: top;
  display: inline-block;
  border:  solid #ddd;
  padding: 5px;
  background: #fff;
  height: 100%;
  width: 350px;
  border-radius: 100px 100px;
}
.driver{
  position: relative;
  vertical-align: top;
  margin-left: 60px;
  width: 500px;
  height: 100%;
  display: inline-block;
}
</style>

